
import { Component } from 'react';

import { Group, Boxs, Toast, TextField,PhotoField,Button,ActionSheet,} from 'saltui';
const { HBox, Box } = Boxs;
const {
  IconButton,
  ButtonGroup,
} = Button;


import Upload from '../upload';
export default class PageHome extends Component {

  handleTextChange(name, newValue,no) {
     if(newValue.length<=100){
      var options = this.props.options;
      options[no][name] = newValue;
      this.props.onAdd(options);
    }
  }

  constructor(props) {
    super(props);

    this.state = {
      t1:'',
      no : 1
    };
    this.handleTextChange = this.handleTextChange.bind(this);

  }

  componentDidMount(){
    let t = this;
    // $('#content'+t.props.datakey).keyup(
    //   function(){
    //     var value = $(this).val();
    //     var options = t.props.options;
    //     var content = {'optionsContent':value};
    //     options.splice(0,1,content);
    //     t.props.onAdd(options);
    //       // var remain = $(this).val().length;
    //       // if(remain > 500){
    //       //         pattern = "字数超过限制！";
    //       //     }else{
    //       //         var result = limitNum - remain;
    //       //         pattern = '还可以输入' + result + '字符';
    //       //     }
    //       //     $('#contentwordage').html(pattern);
    //        }
    //   );
  }


  handleDel(e){
     var rows = this.props.options;
     if(rows.length>1){
      var delIndex=e.target.getAttribute('data-key');
      this.props.options.splice(delIndex,1);
      this.props.onDel(this.props.options);
    }else{
       Toast.show({
          type: 'error',
          content: '选项至少保留1个'
        });
        return;
    }
    
  }
  handleAdd(e) {
    e.preventDefault();
      // var no = this.state.no ;
      // no ++;
      // this.setState({
      //   no : no
      // });
      // var optionName = this.formatNo(no);
      var rows = this.props.options;
    var jsonLength = 0;
    rows.map(function(item, index){
              jsonLength++;
            });
    if(jsonLength>=20){
       Toast.show({
          type: 'error',
          content: '选项最多为20个'
        });
        return;
    }
      var option = {'optionsContent':'选项','optionSetting':{"optionBlank":"0","optionBlankWill":"0","optionScore":"0",'optionImg':[]}}
      rows.push(option);
      this.props.onAdd(rows);
    
    
  }


  //处理选项显示
  // formatNo(no){
  //   switch(no)
  //       {
  //           case 1:
  //              return 'A';
  //               break;
  //           case 2:
  //               return 'B';
  //               break;
  //           case 3:
  //               return 'C';
  //               break;
  //           case 4:
  //               return 'D';
  //               break;
  //     }
  // }

  initUploadImgData(refName){
    this.refs[refName].initData();
  }

  handleChangePic(no,img){
    // this.setState({
    //   todoList:rows,
    // })
    // var id = "";
    // if(img.length>0){
    //   id = img[0].id;
    // }
    var options = this.props.options;
    // var optionSetting = options.optionSetting;
    // // var imgList = options.optionsImg;
    // // imgList.push(img);
    // optionSetting['optionImg'] = id;
    if(img.length>1){
      Toast.show({
        type: 'error',
        content: '图片最多上传1张',
        onHide: function () {}
     });
      options[no].optionSetting['optionImg'] = [];
      this.props.onAdd(options);
      return;
    }else{
      options[no].optionSetting['optionImg'] = img;
    }
    
    this.props.onAdd(options);
  }

  render() {
     const t = this;
     
    //处理选项显示
    function formatNo(no){
      switch(no)
          {
              case 1:
                return 'A';
                  break;
              case 2:
                  return 'B';
                  break;
              case 3:
                  return 'C';
                  break;
              case 4:
                  return 'D';
                  break;
              case 5:
                  return 'E';
                  break;
              case 6:
                  return 'F';
                  break;
              case 7:
                  return 'G';
                  break;
              case 8:
                  return 'H';
                  break;
              case 9:
                  return 'I';
                  break;
              case 10:
                  return 'J';
                  break;
              case 11:
                  return 'K';
                  break;
              case 12:
                  return 'L';
                  break;
              case 13:
                  return 'M';
                  break;
              case 14:
                  return 'N';
                  break;
              case 15:
                  return 'O';
                  break;
              case 16:
                  return 'P';
                  break;
              case 17:
                  return 'Q';
                  break;
              case 18:
                  return 'R';
                  break;
              case 19:
                  return 'S';
                  break;
              case 20:
                  return 'T';
                  break;
        }
    }

    return (
        <div>
          {this.props.type=='2'?
          
                <div className="dd-ques-anw-option" > 
                  <div className="dd-ques-optiontext">
                  <div className="dd-ques-textarea">
                  <textarea id={'content'+this.props.datakey}></textarea></div>
              
                  </div>
             
                </div> 
            : 
            this.props.options.map(function(item,j){
              return (
              <div>
                <div className="dd-ques-option" > 
                  <div className="dd-ques-optiontext">
                    <TextField
                      label={formatNo(j+1)}
                      className="t-MR10"
                      placeholder="请输入"
                      value={item.optionsContent}
                      onChange={(value) => {t.handleTextChange('optionsContent', value,j);}}
                    />
                  <i className="iconfont icon-minus t-MT2" onClick={this.handleDel.bind(this)} data-key={j}></i>
                  </div>
                <div className="dd-ques-optionpic">
                  <Upload uploadType="image" no={this.props.type+"_"+j} ref={"UploadImage"+t.props.datakey+""+j} initList={item.optionSetting.optionImg} dir="questionnaire" canAdd="true" canDel="true" onChange={this.handleChangePic.bind(this,j)} limitNo="1" onDel={this.handleChangePic.bind(this,j)}/>
                  </div>
                </div>

               </div>
            )}.bind(this))

          }
            <div onClick={this.handleAdd.bind(this)} className={this.props.type==2?'t-DN':''} name="新增" ref="addnew">
           <Button type="primary" display="banner" >
              <i className="iconfont icon-plus"></i>
            </Button>
            </div>
            </div>
         
    )
}
}

